<template>
  <view class="withdraw-success-container">
    <!-- 成功提示内容 -->
    <view class="success-content">
      <view class="success-icon">
        <view class="check-circle">
          <text class="check-mark">✓</text>
        </view>
      </view>
      <view class="success-message">
        <text class="success-title">提交成功</text>
        <text class="success-subtitle">等待平台审核</text>
      </view>
      <button class="back-to-home-btn" @click="backToHome">返回首页</button>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'WithdrawSuccess',
  setup() {
    // 返回上一页
    const handleBack = () => {
      uni.navigateBack();
    };

    // 返回首页
    const backToHome = () => {
      uni.navigateTo({ url: '/pages/index/index' });
    };

    return {
      handleBack,
      backToHome
    };
  }
});
</script>

<style scoped>
.withdraw-success-container {
  min-height: 100vh;
  background-color: #ffffff;
}

/* 头部导航 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100rpx;
  background-color: #ffffff;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #e5e5e5;
}

.header-left,
.header-right {
  width: 60rpx;
}

.back-icon {
  font-size: 40rpx;
  color: #333333;
}

.header-title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333333;
}

/* 成功提示内容 */
.success-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 170rpx;
}

.success-icon {
  margin-bottom: 60rpx;
}

.check-circle {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  background-color: #52c41a;
  display: flex;
  align-items: center;
  justify-content: center;
}

.check-mark {
  font-size: 80rpx;
  color: #ffffff;
  font-weight: bold;
}

.success-message {
  text-align: center;
  margin-bottom: 100rpx;
}

.success-title {
  display: block;
  font-size: 40rpx;
  font-weight: 600;
  color: #333333;
  margin-bottom: 20rpx;
}

.success-subtitle {
  display: block;
  font-size: 32rpx;
  color: #666666;
}

.back-to-home-btn {
  width: 480rpx;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #1989fa;
  color: #ffffff;
  font-size: 32rpx;
  border-radius: 45rpx;
  border: none;
}

.back-to-home-btn::after {
  border: none;
}
</style>